<template>
  <section class="ai-tags">
    <div class="tags-header">
      <h2 class="tags-title">友福AI婚恋-专属单身标签</h2>
      <p class="tags-subtitle">Right Beside You, They Love Each Other!</p>
      <div class="btn-glow download-btn" @click="downloadFloveApp()">立即下载</div>
      <div class="tags-icon">
        <img src="https://images.health.ufutx.com/202506/18/3b16ca61dc63eb22c102aed934301c0a.png" alt="" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { downloadFloveApp } from '@/utils/tools.js'
</script>

<style scoped lang="less">
.ai-tags {
  padding: 100px 192px;
  text-align: center;
  background: #ffffff;

  .tags-header {
    .tags-title {
      font-size: 50px;
      font-weight: bold;
      color: @text-color;
      margin-bottom: 17px;
    }

    .tags-subtitle {
      font-size: 60px;
      color: #b5b5b5;
      margin-bottom: 17px;
    }
    .download-btn {
      display: inline-block;
      padding: 14px 30px;
      border-radius: 100px;
      background: var(--Style, #1060ff);
      color: var(--ffffff, #fff);
      font-size: 18px;
      //font-weight: 500;
      margin-bottom: 50px;
    }
  }

  //.tags-carousel {
  //  display: flex;
  //  justify-content: center;
  //  gap: 60px;
  //  margin-top: 60px;
  //  animation: rotate 10s infinite linear;
  //  transform-origin: center;
  //
  //  @keyframes rotate {
  //    0% {
  //      transform: rotate(0deg);
  //    }
  //    100% {
  //      transform: rotate(360deg);
  //    }
  //  }
  //
  //  .tag-item {
  //    width: 180px;
  //    height: 240px;
  //    background: #fff;
  //    border-radius: 12px;
  //    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  //    padding: 20px;
  //    display: flex;
  //    flex-direction: column;
  //    align-items: center;
  //    justify-content: center;
  //
  //    .tag-img {
  //      width: 120px;
  //      height: 120px;
  //      border-radius: 50%;
  //      object-fit: cover;
  //      margin-bottom: 20px;
  //    }
  //
  //    .tag-desc {
  //      font-size: @font-size-sm;
  //      color: @text-color-secondary;
  //    }
  //  }
  //}

  @media (max-width: @tablet-breakpoint) {
    .tags-carousel {
      flex-direction: column;
      animation: none;
      gap: 30px;

      .tag-item {
        margin: 0 auto;
      }
    }
  }
}
</style>
